<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>
{include file="public/header" /}

<body style="height: 100%; margin: 0">
    <div class="layui-card-body ">
        <form class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
                <input type="text" name="starttime" placeholder="起始日期" id="starttime" value="{:input('get.starttime')}"
                    autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
                <input type="text" name="endtime" placeholder="结束日期" id="endtime" value="{:input('get.endtime')}"
                    autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
                <select name="province" data-area="" lay-filter="province" id="province">
                    <option value="">选择省</option>
                </select>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <select name="city" data-area="" lay-filter="city" id="city">
                    <option value="">选择市</option>
                </select>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <select name="area" data-area="" lay-filter="area" id="area">
                    <option value="">选择区</option>
                </select>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <select name="street" data-area="" lay-filter="street" id="street">
                    <option value="">选择街道</option>
                </select>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <button class="layui-btn" lay-submit="" lay-filter="sreach">搜索
                </button>
            </div>
        </form>
    </div>
    <div id="container" style="height: 100%;"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script type="text/javascript">
        var starttime = "{:input('get.starttime')}";
        var endtime = "{:input('get.endtime')}";
        var province = "{:input('get.province')}";
        var city = "{:input('get.city')}";
        var area = "{:input('get.area')}";
        var street = "{:input('get.street')}";
        var charts = {};
        var components = {};
        $.ajax({
            type: 'post',
            url: '/main/alldatas',
            data: { starttime: starttime, endtime: endtime, province: province, city: city, area: area, street: street },
            success: function (res) {
                $.each(res.data, function (i, obj) {
                    charts[obj.name] = obj.counts;
                    components[obj.name] = obj.total;

                    console.log(obj);
                });
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                var builderJson = {
                    "charts": charts,
                    "components": components,
                    "ie": 1
                };

                var downloadJson = charts;

                var themeJson = components;

                var waterMarkText = 'ECHARTS';

                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                canvas.width = canvas.height = 100;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.globalAlpha = 0.08;
                ctx.font = '20px Microsoft Yahei';
                ctx.translate(50, 50);
                ctx.rotate(-Math.PI / 4);
                ctx.fillText(waterMarkText, 0, 0);

                option = {
                    backgroundColor: {
                        type: 'pattern',
                        image: canvas,
                        repeat: 'repeat'
                    },
                    tooltip: {},
                    title: [{
                        text: '订单量/订单金额柱状统计',
                        subtext: '总计 ' + Object.keys(builderJson.charts).reduce(function (all, key) {
                            return all + builderJson.charts[key];
                        }, 0),
                        left: '25%',
                        textAlign: 'center'
                    }, {
                        text: '订单量饼状图',
                        subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
                            return all + downloadJson[key];
                        }, 0),
                        left: '75%',
                        textAlign: 'center'
                    }, {
                        text: '订单金额饼状图',
                        subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
                            return all + themeJson[key];
                        }, 0),
                        left: '75%',
                        top: '50%',
                        textAlign: 'center'
                    }],
                    grid: [{
                        top: 50,
                        width: '50%',
                        bottom: '45%',
                        left: 10,
                        containLabel: true
                    }, {
                        top: '55%',
                        width: '50%',
                        bottom: 0,
                        left: 10,
                        containLabel: true
                    }],
                    xAxis: [{
                        type: 'value',
                        max: Object.keys(builderJson.charts).reduce(function (all, key) {
                            return all + builderJson.charts[key];
                        }, 0),
                        splitLine: {
                            show: false
                        }
                    }, {
                        type: 'value',
                        max: Object.keys(builderJson.components).reduce(function (all, key) {
                            return all + builderJson.components[key];
                        }, 0),
                        gridIndex: 1,
                        splitLine: {
                            show: false
                        }
                    }],
                    yAxis: [{
                        type: 'category',
                        data: Object.keys(builderJson.charts),
                        axisLabel: {
                            interval: 0,
                            rotate: 30
                        },
                        splitLine: {
                            show: false
                        }
                    }, {
                        gridIndex: 1,
                        type: 'category',
                        data: Object.keys(builderJson.components),
                        axisLabel: {
                            interval: 0,
                            rotate: 30
                        },
                        splitLine: {
                            show: false
                        }
                    }],
                    series: [{
                        type: 'bar',
                        stack: 'chart',
                        z: 3,
                        label: {
                            normal: {
                                position: 'right',
                                show: true
                            }
                        },
                        data: Object.keys(builderJson.charts).map(function (key) {
                            return builderJson.charts[key];
                        })
                    }, {
                        type: 'bar',
                        stack: 'chart',
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#eee'
                            }
                        },
                        data: Object.keys(builderJson.charts).map(function (key) {
                            return builderJson.all - builderJson.charts[key];
                        })
                    }, {
                        type: 'bar',
                        stack: 'component',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        z: 3,
                        label: {
                            normal: {
                                position: 'right',
                                show: true
                            }
                        },
                        data: Object.keys(builderJson.components).map(function (key) {
                            return builderJson.components[key];
                        })
                    }, {
                        type: 'bar',
                        stack: 'component',
                        silent: true,
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: '#333'
                            }
                        },
                        data: Object.keys(builderJson.components).map(function (key) {
                            return builderJson.all - builderJson.components[key];
                        })
                    }, {
                        type: 'pie',
                        radius: [0, '30%'],
                        center: ['75%', '25%'],
                        data: Object.keys(downloadJson).map(function (key) {
                            return {
                                name: key,
                                value: downloadJson[key]
                            }
                        })
                    }, {
                        type: 'pie',
                        radius: [0, '30%'],
                        center: ['75%', '75%'],
                        data: Object.keys(themeJson).map(function (key) {
                            return {
                                name: key,
                                value: themeJson[key]
                            };
                        })
                    }]
                };;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
                console.log(charts);
                console.log(1111);
            }
        });


    </script>
</body>
{include file="public/footer"}
<script>
    layui.use(['form', 'upload'], function () {
        var $ = layui.jquery
            , form = layui.form
            , layer = layui.layer;
        //渲染省份
        $.ajax({
            type: 'get',
            url: '/base/getarea',
            data: { level: 1 },
            success: function (res) {
                if (res.code == 0) {
                    var str = '<option value="">请选择省份</option>';
                    $.each(res.data, function (i, obj) {
                        str += '<option value="' + obj.area_code;
                        if (res.type != 1) {
                            if (obj.area_code == res.province) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '" disabled>' + obj.name;
                            }
                        } else {
                            if (obj.area_code == res.province) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '">' + obj.name;
                            }
                        }
                        str += '</option>';
                    });
                    $('select[name="province"]').html(str);
                    form.render();
                }
            }
        });
        //选软城市
        $.ajax({
            type: 'get',
            url: '/base/getarea',
            data: { level: 2 },
            success: function (res) {
                if (res.code == 0) {
                    var str = '<option value="">请选择城市</option>';
                    $.each(res.data, function (i, obj) {
                        str += '<option value="' + obj.area_code;
                        if (res.type != 1) {
                            if (obj.area_code == res.city) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '" disabled>' + obj.name;
                            }
                        } else {
                            if (obj.area_code == res.city) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '">' + obj.name;
                            }
                        }
                        str += '</option>';
                    });
                    $('select[name="city"]').html(str);
                    form.render();
                }
            }
        });
        //选软区域
        $.ajax({
            type: 'get',
            url: '/base/getarea',
            data: { level: 3 },
            success: function (res) {
                if (res.code == 0) {
                    var str = '<option value="">请选择区域</option>';
                    $.each(res.data, function (i, obj) {
                        str += '<option value="' + obj.area_code;
                        if (res.type == 3) {
                            if (obj.area_code == res.area && "{$data['id']|default='0'}" > 0) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '" disabled>' + obj.name;
                            }
                        } else {
                            if (obj.area_code == res.area && "{$data['id']|default='0'}" > 0) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '">' + obj.name;
                            }
                        }
                        str += '</option>';
                    });
                    $('select[name="area"]').html(str);
                    form.render();
                }
            }
        });
        //选软街道
        $.ajax({
            type: 'get',
            url: '/base/getarea',
            data: { level: 4 },
            success: function (res) {
                if (res.code == 0) {
                    var str = '<option value="">请选择街道|村镇</option>';
                    $.each(res.data, function (i, obj) {
                        str += '<option value="' + obj.id;
                        if (res.type == 4) {
                            if (obj.id == res.street && "{$data['id']|default='0'}" > 0) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '" disabled>' + obj.name;
                            }
                        } else {
                            if (obj.id == res.street && "{$data['id']|default='0'}" > 0) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '">' + obj.name;
                            }
                        }
                        str += '</option>';
                    });
                    $('select[name="street"]').html(str);
                    form.render();
                }
            }
        });
        //监听省份选择市区
        form.on('select(province)', function (data) {
            $.ajax({
                type: 'get',
                url: '/base/getarea',
                data: { id: data.value, level: 2 },
                success: function (res) {
                    if (res.code == 0 && data.value > 0) {
                        var str = '<option value="">请选择城市</option>';
                        $.each(res.data, function (i, obj) {
                            str += '<option value="' + obj.area_code;
                            str += '">' + obj.name;
                            str += '</option>';
                        });
                        $('select[name="city"]').html(str);
                        form.render();
                    }
                }
            });
            return false;
        });

        form.on('select(city)', function (data) {
            $.ajax({
                type: 'get',
                url: '/base/getarea',
                data: { id: data.value, level: 3 },
                success: function (res) {
                    if (res.code == 0 && data.value > 0) {
                        var str = '<option value="">请选择区域</option>';
                        $.each(res.data, function (i, obj) {
                            str += '<option value="' + obj.area_code;
                            str += '">' + obj.name;
                            str += '</option>';
                        });
                        $('select[name="area"]').html(str);
                        form.render();
                    }
                }
            });
            return false;
        });
        form.on('select(area)', function (data) {
            $.ajax({
                type: 'get',
                url: '/base/getarea',
                data: { id: data.value, level: 4 },
                success: function (res) {
                    if (res.code == 0 && data.value > 0) {
                        var str = '<option value="">请选择街道|村镇</option>';
                        $.each(res.data, function (i, obj) {
                            str += '<option value="' + obj.id;
                            str += '">' + obj.name;
                            str += '</option>';
                        });
                        $('select[name="street"]').html(str);
                        form.render();
                    }
                }
            });
            return false;
        });

    });
</script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#starttime' //指定元素
            , type: 'date'

        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#endtime' //指定元素
            , type: 'date'

        });
    });

</script>

</html>